{include file="account/common/head"}
<style>
    .art-head a {
        cursor: pointer;
    }

    .layui-form-label {
        width: 100px;
    }
    .score{
        display: flex;
        align-items: center;
    }
</style>
<script>
    document.title = "我的中心 | {:config('system.base.title')} "
</script>>
<div class="layout clearfix">
    <span class="layui-breadcrumb">
        <a href="{:url('/index/index/index')}">首页</a>
        <a><cite>我的中心</cite></a>
    </span>
    <div class="navbar">
        <div class="data layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li class="">我的头像</li>
                <li class="">更换密码</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item  layui-show">
                    <form class="layui-form layui-pane" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <input type="text" name="scene" value="update" hidden>
                            <div class="layui-input-block">
                                <input type="text" name="username" value="{$userData.profile.username}"
                                    lay-verify="required" disabled autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-block">
                                <input type="text" name="nickname" value="{$userData.profile.nickname}"
                                    lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">个性标签</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入个性标签" name="signature" value="{$userData.profile.signature}"
                                    class="layui-textarea">{$userData.profile.signature}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">验证邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" lay-verify="email" value="{$userData.profile.email}"
                                        placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <!-- <div class="layui-form-item score">
                            <div class="layui-inline">
                                <label class="layui-form-label">积分：</label>
                            </div>
                            <span class="layui-badge layui-bg-orange">{$userData.profile.score}</span>
                        </div> -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="update">修改信息</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="layui-tab-item">
                    <button type="button" class="layui-btn" id="uploadHeadIcon">
                        <i class="layui-icon layui-icon-upload"></i> 上传头像
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="headIcon" style="width: 100%; height: 92px;">
                            <div id="upload-text"></div>
                        </div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <form class="layui-form layui-pane" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">旧密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" lay-verify="required" placeholder="请输入旧密码"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">新密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="newPassword" lay-verify="required" placeholder="请输入新密码"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认你的新密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="confirmPwd" lay-verify="required" placeholder="请再次输入你的新密码"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <input type="text" name="scene" value="changePwd" hidden>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="update">修改密码</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
{include file="common/bottom"}
<script>
    layui.use(['form', 'laydate', 'util'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var element = layui.element;
        var upload = layui.upload;
        var util = layui.util;
        var $ = layui.$
        // 提交事件
        $('#headIcon').attr('src', "{$userData.profile.head_icon}")
        form.on('submit(update)', function (data) {
            var field = data.field; // 获取表单字段值
            $.ajax({
                url: "/index/account/doUpdate"
                , type: 'post'
                , data: field
                , success: (res) => {
                    if (res.code == 200) {
                        layer.msg('修改成功', { icon: 6 })
                    } else {
                        layer.msg('修改失败：' + res.message, { icon: 5 })
                    }
                }, error: (res) => {
                    layer.msg('网络或服务器异常，请稍后再试', { icon: 5 })
                }
            })

            return false; // 阻止默认 form 跳转
        });
        var uploadInst = upload.render({
            elem: '#uploadHeadIcon',
            url: '/index/account/uploadHeadIcon', // 实际使用时改成您自己的上传接口即可。
            field: 'headIcon',
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#headIcon').attr('src', result); // 图片链接（base64）
                });
                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', { icon: 16, time: 0 });
            },
            done: function (res) {
                if (res.code == 0) {
                    $('#upload-text').html(''); // 置空上传失败的状态
                    return layer.msg('上传失败：'+ res.message ,  { icon: 5 });
                } else {
                    return layer.msg('上传成功', { icon: 6 });
                }
            },
            error: function () {
                var demoText = $('#upload-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });

    });
</script>